<script setup lang="ts">
import { computed, ref } from 'vue'

// 表单数据
const formData = ref({
  username: '',
  password: '',
})

// 是否显示密码
const showPassword = ref(false)

// 按钮是否禁用
const isDisabled = computed(() => {
  return !formData.value.username || !formData.value.password
})

// 清空输入框内容
function clearInput(field: 'username' | 'password') {
  formData.value[field] = ''
}

// 处理登录
function handleLogin() {
  if (isDisabled.value)
    return

  // TODO: 实现登录逻辑
  console.log('登录信息：', formData.value)
}
</script>

<template>
  <view class="login-container">
    <!-- <image class="logo" src="/static/logo.png" mode="aspectFit" /> -->

    <view class="form-container">
      <view class="input-group">
        <uni-easyinput v-model="formData.username" error-message focus placeholder="请输入用户名/手机号" />

        <!-- <input
          v-model="formData.username"
          class="input"
          type="text"
          placeholder="请输入用户名/手机号"
          placeholder-class="placeholder"
        >
        <text v-if="formData.username" class="clear-icon" @tap="clearInput('username')">
          ×
        </text> -->
      </view>

      <view class="input-group">
        <input
          v-model="formData.password"
          class="input"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
          placeholder-class="placeholder"
        >
        <text v-if="formData.password" class="clear-icon" @tap="clearInput('password')">
          ×
        </text>
      </view>

      <button
        class="login-btn"
        :class="{ disabled: isDisabled }"
        :disabled="isDisabled"
        @tap="handleLogin"
      >
        登录
      </button>

      <view class="actions">
        <text class="forget-pwd">
          忘记密码？
        </text>
        <text class="register">
          立即注册
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.login-container {
  min-height: 100vh;
  padding: 60rpx 40rpx;
  background-color: #fff;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin: 60rpx auto;
  display: block;
}

.form-container {
  margin-top: 80rpx;
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
}

.input {
  width: 100%;
  height: 90rpx;
  padding: 0 80rpx 0 20rpx;
  font-size: 32rpx;
  border-bottom: 2rpx solid #eee;

  &:focus {
    border-bottom-color: $uni-color-primary;
  }
}

.placeholder {
  color: #999;
  font-size: 32rpx;
}

.clear-icon {
  position: absolute;
  right: 40rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.eye-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  padding: 10rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: $uni-color-primary;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 60rpx;

  &.disabled {
    background-color: #ccc;
    color: #fff;
  }

  &:active:not(.disabled) {
    opacity: 0.8;
  }
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  font-size: 28rpx;

  .forget-pwd, .register {
    color: $uni-color-primary;
  }
}
</style>
